<template>
  <div class="container-big wing-blank forward-active-page">
    <div class="forward-active-card">
      <img src="https://img.alicdn.com/tfs/TB1NKCmRxnaK1RjSZFBXXcW7VXa-1380-912.png" class="active-card-bg">
      <!-- <div class="alibaba-design" /> -->
      <div class="forward-active-ucan-title">
        <!-- <img src="https://gw.alicdn.com/tfs/TB1j1kNHbPpK1RjSZFFXXa5PpXa-201-32.png" class="logo-title"> -->
        {{activityParams.activityTitle||"会务"}}
      </div>
      <p class="forward-active-card-sub-title">
        [转送票激活]
      </p>
      <p class="forward-active-card-desc">
        <!--规定日期 -->
        请务必在2019年5月24日24点前完成激活，以免逾期失效
      </p>

      <co-list form>
        <!-- <co-list-item>
          <span class="active-form-label">
            手机号
          </span>
          <co-input slot="right" v-model="mobile" placeholder="请输入受赠人手机号" />
        </co-list-item> -->
        <co-list-item>
          <span class="active-form-label">
            激活码
          </span>
          <co-input slot="right" v-model="code" placeholder="请输入激活码" />
        </co-list-item>
        <co-list-item link class="active-must-item" @click.stop="goToFillInForm">
          用票人信息采集
          <span slot="right">
            {{ receiverName }}
          </span>
        </co-list-item>
      </co-list>
      <co-button block color="primary" class="forward-active-submit" :disabled="!canSubmit" :loading="processing" @click.stop="submit">
        立即激活
      </co-button>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import services from "../../api/forward";
import areaCode from "./../infoEntry/areaCode.json";

export default {
  data() {
    return {
      code: "",
      mobile: "",
      processing: false,
      activityParams: {} //活动参数
    };
  },
  mounted() {
    const { code } = this.$route.query;
    this.code = (code && code.trim()) || "";

    // if (this.storedMobile) {
    //   this.mobile = this.storedMobile;
    // }

    this.getProParams();
  },
  methods: {
    ...mapMutations("forward", ["updateMobile"]),
    async getProParams() {
      let res = await services.getProParams(this.code);
      if (res.success) {
        this.activityParams = res.result;
      }
    },
    async submit() {
      // this.$router.push({
      //   path: "/forward/active/success",
      //   query: {
      //     mobile: 111,
      //     corpId: "111"
      //   }
      // });
      // return;
      try {
        this.processing = true;
        const objFormData = this.mapFormArrayToObject(this.formData);
        let countryCode = "86";
        let country = "中国";
        let saveFromVal = this.$store.state.saveFromVal;
        for (let i = 0; i < saveFromVal.length; i++) {
          if (saveFromVal[i].attribute.filedCode == "uTel") {
            countryCode = saveFromVal[i].attribute.areaCode;
            for (let j = 0; j < areaCode.length; j++) {
              if (countryCode == areaCode[j].tel) {
                country = areaCode[j].name;
              }
            }
          }
        }

        const submitFormData = {
          activityId: this.activityParams.activityId,
          countryCode: countryCode,
          country: country,
          inviteCode: this.code,
          userInfo: objFormData
          // tel: this.mobile
        };
        const { uTel } = objFormData || "";
        // Object.assign(submitFormData, objFormData);
        console.log(submitFormData);
        await services.receive(submitFormData);
        this.$router.push({
          path: "/forward/active/success",
          query: {
            mobile: uTel,
            corpId: this.activityParams.corpId || ""
          }
        });
        this.processing = false;
      } catch (err) {
        this.processing = false;
      }
    },
    // 填写用户人信息
    goToFillInForm() {
      if (
        !this.activityParams.activityId ||
        !this.activityParams.ticketTypeId
      ) {
        this.$toast("必要参数缺失,将重新获取");
        setTimeout(() => {
          window.location.reload();
        }, 3000);
        return;
      }
      // this.updateMobile(this.mobile);
      this.$router.push({
        path: "/infoEntryGive",
        query: {
          isReadonly: true,
          activityParams: this.activityParams
        }
      });
    },
    /**
     * convert from
     * [{ attribue: { fieldCode: 'uName', fieldValue: 1 }}, { attribue: { fieldCode: 'uEmail', fieldValue: 2 }}]
     * to
     * { uName: 1, uEmail: 2 }
     **/
    mapFormArrayToObject(formData) {
      return !Array.isArray(formData)
        ? {}
        : formData.reduce((acc, curr) => {
            const key =
              (curr && curr.attribute && curr.attribute.filedCode) || null;
            const value =
              (curr && curr.attribute && curr.attribute.filedValue) || null;
            return key && value ? { ...acc, [key]: value } : acc;
          }, {});
    }
  },
  computed: {
    ...mapState({
      formData: state => state.forward.formData,
      storedMobile: state => state.forward.mobile
    }),
    receiverName() {
      return (
        (this.formData &&
          this.formData[0] &&
          this.formData[0].attribute &&
          this.formData[0].attribute.filedValue) ||
        "必填"
      );
    },
    isMobileValid() {
      return /^\d{11}$/.test(this.mobile);
    },
    canSubmit() {
      return this.code && this.formData;
    }
  }
};
</script>
<style lang="less">
.forward-active-page {
  padding-top: 30px;
  text-align: left;
  .forward-active-card {
    padding: 40px 30px 50px;
    position: relative;
    z-index: 1;
    .active-card-bg {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    .alibaba-design {
      left: 30px;
      top: 24px;
      width: 91px;
      height: 16px;
    }
    .active-share-icon {
      font-size: 56px;
      position: absolute;
      right: 24px;
      top: 24px;
    }
    .active-form-label {
      width: 130px;
    }
  }

  .active-must-item {
    .co-list-item-right {
      color: #fff;
    }
    .co-list-item-link {
      color: #d7d8d9;
      font-size: 18px;
    }
  }

  .forward-active-ucan-title {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 40px;
    .logo-title {
      width: 200px;
      margin-right: 5px;
    }
  }

  .forward-active-card-sub-title {
    font-size: 40px;
    margin-top: 10px;
  }

  .forward-active-card-desc {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 20px;
  }

  .forward-active-submit {
    border-radius: 2px;
    height: 96px;
    font-size: 32px;
    margin-top: 30px;
  }
}
</style>
